<template>
	<view class="i-login flex-col">
		<view class="mask h-364 padding-top-200 border-box flex-center-center">
			<view class="logo w-136 h-136 round-999"></view>
		</view>
		<view class="content flex-1 border-box flex-col pos-relative padding-x-60">
			<form class="flex-1" @submit="submit" @reset="reset">
				<view class="form-content p-t-32">
					<view class=" phone flex-col">
						<text class="label lh-46 f-32 fw-500 color-33">手机号</text>
						<input v-model="formData.phone" class="input-item f-28 lh-40 flex-1 padding-y-18 m-t-18" type="text" placeholder="请输入手机号" />
					</view> 
					<view class="code flex-col m-t-58">
						<text class="label lh-46 f-32 fw-500 color-33">短信验证码</text>
						<view class="input-item f-28 lh-40 flex-start-center padding-y-18 m-t-18">
							<input v-model="formData.smsCode" class="flex-1" type="text" placeholder="请输入验证码" />
							<view @click="getCode" class="get-code">
								获取验证码
							</view>
						</view>
					</view>
				</view>
				<view @click="submit" class="submit m-t-84 flex-center-center color-white f-32 fw-700 lh-32 h-90 round-999">
					登录
				</view>
				<view class="unit m-t-26 flex-center-center f-28 lh-34 color-99">
					登录即表示接受<text class="deal">《用户协议》</text>与<text class="deal">《隐私政策》</text>
				</view>
			</form>
			<view class="bottom">
				<view class="line flex-between-center color-99 lh-42 f-28">第三方账号登录</view>
				<view class="list flex-around-center margin-top-42">
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
					<view class="item w-72 h-72 round-999 bgc-ee">
						<image src="" mode=""></image>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onLoad } from '@dcloudio/uni-app';
	import { ref } from "vue"
	
	const formData = ref({
		phone: "",
		smsCode: ""
	})
	
	onLoad(()=>{
		
	})
	
	// 获取验证码
	function getCode(){
		
	}
	// 提交表单
	function submit(){
		if(!formData.value.phone){
			uni.showToast({
				title: "手机号不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		if(!formData.value.smsCode){
			uni.showToast({
				title: "验证码不能为空！",
				mask: true,
				icon: "none",
				position: "center"
			})
			return
		}
		console.log(formData.value)
	}
	// 清空表单
	function reset(){
		
	}
	// 遇见问题
	function trouble(){
		
	}
	// 忘记密码
	function forget(){
		
	}
	function capError(){
		
	}
</script>

<style lang="scss" scoped>
.i-login{
	width: 100%;
	height: 100%;
	background: linear-gradient(to bottom, #E4F1FF 0rpx, #FFFFFF 489rpx);
	.mask{
		.logo{
			background-color: #047BFF;
		}
	}
	.content{
		.form-content{
			.input-item{
				border-bottom: 2rpx solid #D0D0D0;
				.get-code{
					flex-shrink: 0;
				}
			}
		}
		.submit{
			background: linear-gradient(160.78deg, #1DB2FF 0%, #047BFF 100%);
		}
		.unit{
			.deal{
				color: #409EFE;
			}
		}
		.bottom{
			padding-bottom: calc(50rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(50rpx + env(safe-area-inset-bottom));
			.line{
				&::after,&::before{
					content: "";
					height: 1px;
					flex: 1;
					background-color: #D0D0D0;
				}
				&::before{
					margin-right: 60rpx;
				}
				&::after{
					margin-left: 60rpx;
				}
			}
			.list{
				.item{
					
				}
			}
		}
	}
}
</style>
